<template>
	<view class="container">
		<!-- 全屏音频背景图片 -->
		<image class="fullscreen-image" :src="currentAudio.img" mode="aspectFill"></image>

		<!-- 上一首按钮-->
		<image src="../../static/image/icons/last_music.png" class="control-button last-music" @click="changeMusic(-1)">
		</image>

		<!-- 旋转图标 -->
		<view class="playing-icon">
			<image :src="currentAudio.img" class="rotate-icon" mode="aspectFill" />
		</view>

		<!-- 下一首按钮-->
		<image src="../../static/image/icons/next_music.png" class="control-button next-music" @click="changeMusic(1)">
		</image>

		<!-- 音频播放器组件 -->
		<view class="audio-controls">
			<yz-audio ref="audioPlayer" :src="currentAudio.src" :poster="currentAudio.img" 
				:singer="currentAudio.author" :name="currentAudio.name">
			</yz-audio>
		</view>
	</view>
</template>

<script>
	import yzAudio from '../../components/yz-audio/yz-audio.vue';
	
	export default {
		components: {
			yzAudio
		},
		data() {
			return {
				audioList: [], // 初始化为空数组
				currentIndex: 0
			}
		},
		computed: {
			currentAudio() {
				// 确保返回有效的音频对象，避免undefined
				return this.audioList[this.currentIndex] || {};
			}
		},
		methods: {
			changeMusic(direction) {
				this.currentIndex = (this.currentIndex + direction + this.audioList.length) % this.audioList.length;
			}
		},
		onLoad(options) {
			// 在onLoad中处理页面参数
			if (options && options.audioList) {
				try {
					this.audioList = JSON.parse(decodeURIComponent(options.audioList));
					this.currentIndex = parseInt(options.index) || 0;
				} catch (e) {
					console.error('解析音频数据失败:', e);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh; //全屏高度
		position: relative; //相对定位

		// 背景图片
		.fullscreen-image {
			width: 100%;
			height: 100%;
			//确保替换元素的内容缩放并保持宽高比，以完全覆盖其框
			object-fit: cover;
			filter: blur(8px); // 模糊效果
		}

		// 翻页播放按钮
		.control-button {
			position: absolute; //绝对定位
			top: 45%;
			width: 80rpx;
			height: 80rpx;

			&.last-music {
				left: 10%; // 上一首按钮位置
			}

			&.next-music {
				right: 10%; // 下一首按钮位置
			}
		}

		// 旋转图标定位
		.playing-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;

			.rotate-icon {
				width: 200px;
				height: 200px;
				border-radius: 50%; // 圆形
				animation: spin 8s linear infinite; // 使用旋转
			}
		}

		// 旋转动画
		@keyframes spin {
			from {
				transform: rotate(0deg); // 旋转开始角度
			}

			to {
				transform: rotate(360deg); // 旋转结束角度
			}
		}

		// 播放器
		.audio-controls {
			position: absolute;
			bottom: 10px;
			left: 10px;
			right: 10px; // 音频控制区域位置
		}

		//倍速
		.speed-icon {
			font-family: CustomFont;
			font-size: 25px;
			color: #fff;
			display: inline-block;
			width: 25px;
			height: 25px;
			line-height: 1;
		}
	}


	// 引入字体图标
	@font-face {
		font-family: CustomFont;
		src: url('/static/iconfont.ttf');
	}
</style>